<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />


</h:head>

<h:body>
	<div id="contenedor">
		<div id="headerPlataforma"></div>

		<div id="menu">
			<ui:include src="../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
					<p:panel header="Registro de Ahorro Libre" style="font-size:20px; height:50px;">
					</p:panel>
					<p:panel header="Buscar Persona" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Buscar por.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Seleccione Criterio" itemValue="1" />
									<f:selectItem itemLabel="Documento" itemValue="2" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Criterio:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="buttonSearch">
								<p:commandButton icon="ui-icon-search" id="boton"></p:commandButton>
							</div>
						</div>
					</p:panel>
					<p:panel header="Datos Personales" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.apellidoPaternoRazonSocial}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.apellidoMaterno}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.nombrePersonaNombreComercial}"
									style="width:453px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMNatural}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Documento" />
									<f:selectItems value="#{maestro.listaTipodocumento}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.documentoPersonaN.numero}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMTelf}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Teléfono" />
									<f:selectItems value="#{maestro.listaTipotelefono}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.numero}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.anexo}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Fecha de Nacim.:</label>
							</div>
							<div class="calendar">
								<p:calendar />
							</div>
							<div class="label">
								<label>Sexo:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Sexo" itemValue="1" />
									<f:selectItem itemLabel="Femenino" itemValue="2" />
									<f:selectItem itemLabel="Masculino" itemValue="3" />
								</p:selectOneMenu>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Grado Estudios:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Grado de Estudios" itemValue="1" />
									<f:selectItem itemLabel="Primaria" itemValue="2" />
									<f:selectItem itemLabel="Secundaria" itemValue="3" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Profesión</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="label">
								<label>Ocupación</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Tipo de Ingreso:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMTelf}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Ingreso" />
									<f:selectItems value="" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Empresa:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="label">
								<label>Ingreso:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Fecha de Inicio:</label>
							</div>
							<div class="calendar">
								<p:calendar />
							</div>
							<div class="label">
								<label>Descripc. Cargo:</label>
							</div>
							<div class="field">
								<p:inputText style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.email}"
									style="width:453px" />
							</div>
						</div>
					</p:panel>

					<p:panel header="Datos Domiciliarios" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Departamento:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDepartamento"
									value="#{ubigeo.idDepartamento}" style="width:160px">
									<f:selectItem itemLabel="Dpto." />
									<f:selectItems value="#{ubigeo.listaDepartamento}" />
									<p:ajax update="selectProvincia, selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Provincia:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectProvincia"
									value="#{ubigeo.idProvincia}" style="width:160px">
									<f:selectItem itemLabel="Provincia" />
									<f:selectItems value="#{ubigeo.listaProvincia}" />
									<p:ajax update="selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Distrito:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDistrito"
									value="#{ubigeo.idDistrito}" style="width:160px">
									<f:selectItem itemLabel="Distrito" />
									<f:selectItems value="#{ubigeo.listaDistrito}" />
								</p:selectOneMenu>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Zona.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMZona}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Zona" />
									<f:selectItems value="#{maestro.listaZona}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Zona:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.nombreZona}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Vía.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMVia}" style="width:160px">
									<f:selectItem itemLabel="Tipo Vía" />
									<f:selectItems value="#{maestro.listaVia}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Vía:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.nombreVia}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.numero}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>#Dpto:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.departamento}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Interior:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.interior}"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Manzana:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.manzana}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Lote:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.lote}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Kilómetro:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.kilometro}"
									style="width:157px" />
							</div>
						</div>


						<div class="rowForm">
							<div class="label">
								<label>Referencia:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.direccionPersonaN.referencia}"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Tipo Vivienda.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMVivienda}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Vivienda" />
									<f:selectItems value="#{maestro.listaTipovivienda}" />
								</p:selectOneMenu>
							</div>
						</div>
					</p:panel>
					
					<p:panel header="Datos de la Cuenta" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Tipo de Cuenta:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Seleccione Cuenta" />
									<f:selectItem itemLabel="Ahorro Libre" itemValue="2" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Monto Inicial:</label>
							</div>
							<div class="field">
								<p:inputText></p:inputText>
							</div>	
							<div class="buttonProcess">
								<p:spacer width="125" height="10" />
								<p:commandButton value="Ver Detalle"></p:commandButton>
							</div>							
						</div>
					</p:panel>
					
					<p:panel header="Datos en caso de ser Cuenta Mancomunada" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Buscar por.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Seleccione Criterio" itemValue="1" />
									<f:selectItem itemLabel="Documento" itemValue="2" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Criterio:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="buttonSearch">
								<p:commandButton icon="ui-icon-search" id="boton2"></p:commandButton>
							</div>
						</div>
						<hr></hr>
						<h2>Datos Básicos:</h2>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.apellidoPaternoRazonSocial}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.apellidoMaterno}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText
									value="#{persona.personaN.nombrePersonaNombreComercial}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Parentesco:</label>
							</div>
							<div class="field">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Seleccione Parentesco" itemValue="1" />
									<f:selectItem itemLabel="Padre" itemValue="2" />
									<f:selectItem itemLabel="Hermano" itemValue="3" />
									<f:selectItem itemLabel="Tío" itemValue="4" />
									<f:selectItem itemLabel="Primo" itemValue="5" />
									<f:selectItem itemLabel="Abuelo" itemValue="6" />
									<f:selectItem itemLabel="Amigo" itemValue="7" />
									<f:selectItem itemLabel="Cuñado" itemValue="8" />
								</p:selectOneMenu>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMNatural}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Documento" />
									<f:selectItems value="" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.documentoPersonaN.numero}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Fecha de Nacim.:</label>
							</div>
							<div class="calendar">
								<p:calendar />
							</div>
							<div class="label">
								<label>Sexo:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Sexo" itemValue="1" />
									<f:selectItem itemLabel="Femenino" itemValue="2" />
									<f:selectItem itemLabel="Masculino" itemValue="3" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Estado Civil:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Estado Civil" itemValue="1" />
									<f:selectItem itemLabel="Soltero" itemValue="2" />
									<f:selectItem itemLabel="Casado" itemValue="3" />
									<f:selectItem itemLabel="Viudo" itemValue="3" />
									<f:selectItem itemLabel="Divorciado" itemValue="3" />
									<f:selectItem itemLabel="Conviviente" itemValue="3" />
								</p:selectOneMenu>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Grado Estudios:</label>
							</div>
							<div class="select">
								<p:selectOneMenu style="width:160px">
									<f:selectItem itemLabel="Grado de Estudios" itemValue="1" />
									<f:selectItem itemLabel="Primaria" itemValue="2" />
									<f:selectItem itemLabel="Secundaria" itemValue="3" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Profesión</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="label">
								<label>Ocupación</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMTelf}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Teléfono" />
									<f:selectItems value="" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.numero}"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.telefonoPersonaN.anexo}"
									style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{persona.personaN.email}"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Tipo de Ingreso:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{persona.idCTMTelf}"
									style="width:160px">
									<f:selectItem itemLabel="Tipo Ingreso" />
									<f:selectItems value="" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Empresa:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
							<div class="label">
								<label>Ingreso:</label>
							</div>
							<div class="field">
								<p:inputText style="width:157px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Fecha de Inicio:</label>
							</div>
							<div class="calendar">
								<p:calendar />
							</div>
							<div class="label">
								<label>Descripc. Cargo:</label>
							</div>
							<div class="field">
								<p:inputText style="width:453px" />
							</div>
						</div>
						<h2>Dirección:</h2>
						<div class="rowForm">
								<div class="label">
									<label>Departamento:</label>
								</div>
								<div class="select">
									<p:selectOneMenu id="selectDepartamento2"
										value="#{ubigeo.idDepartamento}" style="width:160px">
										<f:selectItem itemLabel="Dpto." />
										<f:selectItems value="#{ubigeo.listaDepartamento}" />
										<p:ajax update="selectProvincia" />
									</p:selectOneMenu>
								</div>
								<div class="label">
									<label>Provincia:</label>
								</div>
								<div class="select">
									<p:selectOneMenu id="selectProvincia2"
										value="#{ubigeo.idProvincia}" style="width:160px">
										<f:selectItem itemLabel="Provincia" />
										<f:selectItems value="#{ubigeo.listaProvincia}" />
										<p:ajax update="selectDistrito" />
									</p:selectOneMenu>
								</div>
								<div class="label">
									<label>Distrito:</label>
								</div>
								<div class="select">
									<p:selectOneMenu id="selectDistrito2"
										value="#{ubigeo.idDistrito}" style="width:160px">
										<f:selectItem itemLabel="Distrito" />
										<f:selectItems value="#{ubigeo.listaDistrito}" />
									</p:selectOneMenu>
								</div>
							</div>

							<div class="rowForm">
								<div class="label">
									<label for="namevv">Tipo Zona.:</label>
								</div>
								<div class="select">
									<p:selectOneMenu value="#{persona.idCTMZona}"
										style="width:160px">
										<f:selectItem itemLabel="Tipo Zona" />
										<f:selectItems value="#{maestro.listaZona}" />
									</p:selectOneMenu>
								</div>
								<div class="label">
									<label for="namevv">Zona:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.nombreZona}"
										style="width:157px" />
								</div>
							</div>
							<div class="rowForm">
								<div class="label">
									<label for="namevv">Tipo Vía.:</label>
								</div>
								<div class="select">
									<p:selectOneMenu value="#{persona.idCTMVia}"
										style="width:160px">
										<f:selectItem itemLabel="Tipo Vía" />
										<f:selectItems value="#{maestro.listaVia}" />
									</p:selectOneMenu>
								</div>
								<div class="label">
									<label for="namevv">Vía:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.nombreVia}"
										style="width:157px" />
								</div>
							</div>

							<div class="rowForm">
								<div class="label">
									<label>Número:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.numero}"
										style="width:157px" />
								</div>
								<div class="label">
									<label>#Dpto:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.departamento}"
										style="width:157px" />
								</div>
								<div class="label">
									<label>Interior:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.interior}"
										style="width:157px" />
								</div>
							</div>

							<div class="rowForm">
								<div class="label">
									<label>Manzana:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.manzana}"
										style="width:157px" />
								</div>
								<div class="label">
									<label>Lote:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.lote}"
										style="width:157px" />
								</div>
								<div class="label">
									<label>Kilómetro:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.kilometro}"
										style="width:157px" />
								</div>
							</div>


							<div class="rowForm">
								<div class="label">
									<label>Referencia:</label>
								</div>
								<div class="field">
									<p:inputText value="#{persona.direccionPersonaN.referencia}"
										style="width:453px" />
								</div>
								<div class="label">
									<label>Tipo Vivienda.:</label>
								</div>
								<div class="select">
									<p:selectOneMenu value="#{persona.idCTMVivienda}"
										style="width:160px">
										<f:selectItem itemLabel="Tipo Vivienda" />
										<f:selectItems value="#{maestro.listaTipovivienda}" />
									</p:selectOneMenu>
								</div>
							</div>
							<div class="rowForm">
								<div>
									<p:selectBooleanCheckbox />
									<label>Autoriza Retiro de Dinero de la Cuenta.</label>
								</div>								
							</div>
							<br></br>
							<br></br>
							<div class="rowForm">
								<div class="label">
									<label style="visibility: hidden">Grabar:</label>
								</div>
								<div class="buttonProcess">
									<p:commandButton value="Grabar">
									</p:commandButton>
								</div>
								<div class="label">
									<label style="visibility: hidden">Actualizar:</label>
								</div>
								<div class="buttonProcess">
									<p:commandButton value="Actualizar"></p:commandButton>
								</div>
								<div class="label">
									<label style="visibility: hidden">Limpiar:</label>
								</div>
								<div class="buttonProcess">
									<p:commandButton value="Limpiar"></p:commandButton>
								</div>								
							</div>
							<div class="rowForm">
								<p:dataTable id="mancomunada" var="mancomun" paginator="false">
									<p:column headerText="Tipo. Doc." />
									<p:column headerText="Nro. Doc." />
									<p:column headerText="Nombres y Apellidos" />
									<p:column headerText="Prentesco" />
									<p:column headerText="Autoriza Retiro" />
									<p:column headerText="Opc." />
								</p:dataTable>
							</div>	
							<br></br>
							<br></br>
							<br></br>						
					</p:panel>					
					
					<p:panel header="Evaluación" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Resultado:</label>
							</div>
							<div class="field">
								<p:selectOneRadio>
									<f:selectItem itemLabel="APROBADO" itemValue="1" />
									<f:selectItem itemLabel="DESAPROBADO" itemValue="2" />
								</p:selectOneRadio>
							</div>
						</div>
						<br></br>
						<br></br>
						<div class="rowForm">
							<div class="label">
								<label>Observación:</label>
							</div>
							<div class="field">
								<p:inputText style="width:453px" />
							</div>
						</div>
					</p:panel>

					<p:panel header="Procesar" toggleable="true">
						<div class="rowFormProcess">
							<div class="buttonProcess">
								<p:commandButton value="Grabar" />
							</div>
							<div class="buttonProcess">
								<p:commandButton value="Actualizar" />
							</div>
							<div class="buttonProcess">
								<p:commandButton value="Limpiar" />
							</div>
						</div>
					</p:panel>
				</div>
			</h:form>
		</div>

		<div id="footerPlataforma"></div>

	</div>
</h:body>

</html>